<template>
  <a-modal
    v-model:visible="visible"
    title="修改信息"
    width="90vw"
    title-align="start"
    :render-to-body="false"
    ok-text="确定"
    :ok-loading="loading"
    hide-cancel
    @cancel="handleCancel"
    @close="handleClose"
  >
    <FormPro
      ref="formRef"
      v-model="formModel"
      :form-filed-list="formArr"
      layout="vertical"
      :root-row="{
        gutter: 20,
      }"
    ></FormPro>

    <template #footer>
      <a-button type="primary" :loading="loading" @click="handleOk">
        提交
      </a-button>
      <a-button :loading="loading" @click="handleCancel">取消</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineProps, onMounted } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { FormFiled } from '@/components/FormPro/props';
  import { apiDetailUser, apiUpdateUser } from '@/api/system';
  import { getFormFileds } from './data';

  interface Props {
    close: () => void;
    resolve: () => void;
    editType: 'edit' | 'add' | 'detail';
    from: string;
    account: any;
  }
  const props = withDefaults(defineProps<Props>(), {
    close: () => {
      return () => {};
    },
    resolve: () => {
      return () => {};
    },
  });

  let type = '';
  const loading = ref<boolean>(false);
  const visible = ref<boolean>(true);

  const formArr = ref<FormFiled[]>(getFormFileds(props.editType, props.from));

  const avatarUrl =
    'http://vms-dev.cytechs.cn/api/static/data_2407240001083422.png';
  const formModel = ref<any>({
    editType: props.editType,
    avatar: [
      {
        url: avatarUrl,
        name: avatarUrl,
        resData: {
          fileName: avatarUrl,
        },
      },
    ],
  });
  const formRef = ref<any>();

  const handleOk = async () => {
    const result = await formRef.value.aform.validate();
    if (result) return;

    const params: any = {
      realName: formModel.value.realName,
      account: formModel.value.account,
      password: formModel.value.password,
      email: formModel.value.email,
      departments: formModel.value.departments,
      roleNameList: formModel.value.roleNameList,
      tocRole: formModel.value.tocRole,
      state: formModel.value.state,
      account_state: formModel.value.account_state,
      remark: formModel.value.remark,
      type: formModel.value.type,
      avatar: formModel.value?.avatar?.[0]?.resData?.fileName || '',
    };

    params.account = props.account;

    loading.value = true;
    apiUpdateUser(params)
      .then(() => {
        Message.success('操作成功！');

        handleSuccess();
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const getInfo = () => {
    loading.value = true;
    apiDetailUser(props.account)
      .then((res) => {
        formModel.value = {
          ...formModel.value,
          realName: res.data.realName,
          account: res.data.account,
          password: res.data.password,
          departments: res.data.departments,
          roleNameList: res.data.roleNameList,
          tocRole: res.data.tocRole,
          state: res.data.state,
          account_state: res.data.account_state,
          remark: res.data.remark,
          email: res.data.email,
          type: res.data.type,
          avatar: res.data?.avatar
            ? [
                {
                  url: res.data.avatar,
                  name: res.data.avatar,
                  resData: {
                    fileName: res.data.avatar,
                  },
                },
              ]
            : [],
        };
      })
      .finally(() => {
        loading.value = false;
      });
  };

  onMounted(() => {
    getInfo();
  });

  const handleSuccess = () => {
    type = 'reslove';
    visible.value = false;
  };

  const handleCancel = () => {
    type = 'reject';
    visible.value = false;
  };

  const handleClose = () => {
    loading.value = false;
    if (type === 'reject') {
      props.close();
    } else {
      props.resolve();
    }
  };
</script>

<style lang="less"></style>
